<template>
	<li class="collectShow" v-if="show">
		<span class="el-icon-error" @click="del(index)" v-if="show"></span>
		<img :src="fruitImg" alt="订单图">
		<div class="jieshao">
			<p class="jieshao-name">{{fruitName}}</p>
			<p class="jieshao-con">{{fruitCon}}</p>
			<p class="jieshao-min">
				<span class="pink jieshao-price"></span>
				<span class="pink jieshao-price">{{fruitPrice}}</span>
				<span class="under">￥40.00</span>
				<i class="el-icon-shopping-cart-2"></i>
			</p>
		</div>
	</li>
</template>

<script>
	import Qs from 'qs';
	export default {
		components: {},
		props: {
			fruitName: String,
			fruitCon: String,
			fruitPrice: Number,
			fruitImg: String,
			index:Number
		},
		data() {
			return {
				show: true,
			}
		},
		methods: {
			del(index) {
				window.console.log("删除");
				window.console.log(index)
				this.show = false;
				let  data = Qs.stringify({"id": index,'ad':'0'});
				this.$axios({
					method: 'post',
					data:data,
					url: 'http://localhost:3000/recentlook/del',
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				}).then((response) => {
					window.console.log(response.data)
					
				}).catch(function(error) {
					window.console.log(error)
				});	
			},
			
		},
	}
</script>

<style>
	.jieshao-min {
		margin-bottom: 20px;
	}

	.collectShow img {
		width: 100%;
		height: 250px;
	}

	.collectShow .el-icon-error {
		color: #4b943d;
		font-size: 30px;
		margin-right: 5px;
		margin-top: 5px;
		float: right;
	}
</style>
